<template>
  <span
  :class="`span-level-tag span-level-tag-${level}`">Lv.<em>{{ level }}</em></span>
</template>

<script>
export default {
  name: 'LevelCom',
  props: {
    level: Number
  },
  data () {
    return {}
  },
  created () {}
}
</script>
<style lang="less" scoped>
.span-level-tag {
  color: #fff;
  font-style: italic;
  font-size: 10px;
  padding: 0px 6px 1px;
  border-radius: 3px;
  line-height: normal;
  margin-left: 4px;
  font-weight: 600;
  &-1 {
    background-color: #ccc;
  }
  &-2 {
    background-color: #55cb77;
  }
  &-3 {
    background-color: #176be1;
  }
  &-4 {
    background-color: #6d17e1;
  }
  &-5 {
    background-color: #e17317;
  }
  &-6 {
    background-color: #e117cd;
  }
  &-7 {
    background-color: #c91616;
  }
  em {
    margin-left: 2px;
  }
}
</style>
